<template>
	<view class="info">
		<uni-data-select :localdata="starts" @change="change" v-model="value" placeholder="请选择星座"></uni-data-select>

	</view>
	<view class="show" v-if="data">
		<view>{{data.title}}的{{data.type}}</view>
 		<view class="title">综合运势{{data.fortune.all}}星 ，幸运指数：{{data.index.all}}</view>
		<view class="msg">{{data.fortunetext.all}}</view>
		<view class="title">爱情运势{{data.fortune.love}}星，幸运指数：{{data.index.love}}</view>
		<view class="msg">{{data.fortunetext.love}}</view>
		<view class="title">学业工作{{data.fortune.work}}星，幸运指数：{{data.index.work}}</view>
		<view class="msg">{{data.fortunetext.work}}</view>
		<view class="tag">幸运数字:{{data.luckynumber}}</view>
		<view class="tag">幸运颜色:{{data.luckycolor}}色</view>  
		
	</view>
	<view>其他信息略，请根据接口数据添加更多的信息</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	// aries, taurus, gemini, cancer, leo, virgo, libra, scorpio, sagittarius, capricorn, aquarius, pisces
	// 白羊座、金牛座、双子座、巨蟹座、狮子座、处女座、天秤座、天蝎座、射手座、摩羯座、水瓶座、双鱼座
	const starts = ref([{
			value: "aries",
			text: "白羊座"
		},
		{
			value: "taurus",
			text: "金牛座"
		},
		{
			value: "gemini",
			text: "双子座"
		},
		{
			value: "cancer",
			text: "巨蟹座"
		},
		{
			value: "leo",
			text: "狮子座"
		},
		{
			value: "virgo",
			text: "处女座"
		},
		{
			value: "libra",
			text: "天秤座"
		},
		{
			value: "scorpio",
			text: "天蝎座"
		},
		{
			value: "sagittarius",
			text: "射手座"
		},
		{
			value: "capricorn",
			text: "摩羯座"
		},
		{
			value: "aquarius",
			text: "水瓶座"
		},
		{
			value: "pisces",
			name: "双鱼座"
		}
	])
    const data=ref("")
	async function change(e) {
		console.log(e)
		const res = await uni.$get(`https://api.vvhan.com/api/horoscope?type=${e}&time=nextday`)
		console.log(res)
		
	   data.value=res.data.data
		
	}
</script>

<style>
	.info,.show {
		margin: 10px;
	}
	.title{
		font-size: 30rpx;
		color: #00557f;
		padding-left: 5px;
		margin-top: 15px;
		border-left: 3px solid #00557f;
	}
	.msg{
		border:1px solid #ccc;
		padding: 5px;
	}
	.tag{
		background-color:#aa0000;
		color: #fff;
		margin-top: 10px;
		padding: 5px;
		
	}
</style>